Maintain Your Site with Page Include Files

Maintain Your Site with Page Include Files
by Larry (Momp) Poch


We all know how web sites seem to take on a life of their own.
As the number of pages increases maintaining the site can be a
time consuming task...!

The use of "Page Include" files makes the task of editing web
pages a lot easier and faster. An additional benefit is that it
reduces the size of a page, thus improving page load time. This
article takes a brief look at three forms of "Page Include"
files. CSS Includes, SSI Includes, and Javascript Includes.

1. (CSS) Cascading Style Sheet Includes

CSS can be used to format the page margins, font, link colors,
and much more. Create a file in your text editor, and include
all the common stylesheet declarations for your pages, now save
the page with a .css file extension.

Note: the <style type="text/css"> and </style> declaration tags
are not included in an external style sheet. This reference is
in the Link Relevant tag used to call up the stylesheet.

For this example we will call the stylesheet page "main.css". 
h1 {color: #ff0000; font-family: arial; font-size: 14px;
text-decoration : underline; } p {font-family: verdana;
font-size: 10pt; color: #ffffff; } td {font-family: verdana;
font-size: 10pt; color: #ffffff; } a {font-family: arial;
font-size: 10pt; font-weight: bold; } a:link {color: #0000ff;
text-decoration: none; } a:visited {color: #800080;
text-decoration: none; } a.menu:link {color: #ffffff;
text-decoration: none; } a:hover {color: gold; text-decoration:
underline; }

In the <HEAD> tag area of the page the "main.css" stylesheet is
called up using the LINK REL tag. 
<link rel="stylesheet" type="text/css" href="main.css"> 

Now when you want to add or change your page format, just edit
this one file. The changes will appear on any page where the
stylesheet is called up.

For more on CSS see:
http://www.mompswebdesign.com/css/index.html 
<a href="http://www.mompswebdesign.com/css/index.html">AOL Users
Click Here</a>

2. (SSI) Server Side Includes

SSI is a great way of controlling site content that appears on
multiple pages across a web site.

Requirements: 
1. Your web site server must have SSI enabled.
2. Most web hosts require the SSI pages to have a file extension
   of .shtml in place of .html or .htm 
3. The file extension used for the code you insert will depend 
   on the operating system and web server software used on the 
   web hosts server.

When you are using standard html in the code that is inserted 
the extension will be either .html or .htm

Windows IIS servers use .htm file extension. Windows script:
<!--#include file="./file.htm"--> 

Unix/Linux servers running Apache can use a .html file 
extension. Unix/Linux script:
<!--#include file="./file.html"--> 

This example will build a navigation bar for the bottom of a 
page. My web host server is Linux Apache so we will use the 
.html file extension for the nav bar html code file.

Create a file in your text editor and include the HTML code for 
the navigation bar. Now save the SSI page with a .html file 
extension. Any HTML coding can be used in a SSI file, but the 
file should only include the code for the specific item. We will 
name this file "bot_nav.html" and place it in a sub-directory 
called "ssi".

<div align="center">
<a href="html/index.html">HTML</a> ~ 
<a href="css/index.html">CSS</a> ~ 
<a href="webtools/index.html">Web Tools</a> ~
<a href="tutorials/index.html">Tutorials</a> ~ 
<a href="design/index.html">Design Tips</a> ~ 
<a href="downloads/index.html">Downloads</a>
</div>

Now place the following script code on the page in the location 
you want the navigation bar to be rendered and save it as a .shtml 
file so your webserver will know to process it for SSI's.

<!--#include file="./ssi/bot_nav.html"--> 

Now when you add a new page or section to your site and want to
add it to the navigation bar you only have one page to edit. The
changes will appear where ever the SSI include page is called
up. 

Note: when viewing the source code of the page where the script
is called up, the include page coding will appear just as
written in the SSI Include file.

3. Javascript Includes

The Javascript Include is very similar to the SSI Include in the
example above. The differences are in the way the code on our
javascript include page is written. For this example we will use
the same navigation bar code as used above.

Create a file in your text editor and include the HTML code for
the navigation bar. We then add some javascript coding to each
line of the HTML code as well as opening and closing javascript
tags. The code for the javascript include page will look like
this:

<!-- document.writeln('<div align="center">');
document.writeln('<a href="html/index.html">HTML</a> ~');
document.writeln('<a href="css/index.html">CSS</a> ~');
document.writeln('<a href="webtools/index.html">Web Tools</a> ~');
document.writeln('<a href="tutorials/index.html">Tutorials</a> ~');
document.writeln('<a href="design/index.html">Design Tips</a>~');
document.writeln('<a href="downloads/index.html">Downloads</a>');
document.writeln('</div>'); //--> 

Note: The page must begin with <!-- and end with //--> Each page
line must begin with document.writeln(' Each page line must end
with ');

Now save the page with a .js file extension, "bot_nav.js".

Now place the following code on the page in the location you
want the navigation bar to be rendered.

<script src="bot_nav.js" language="javascript"
type="text/javascript"> </script>

Javascript is a very sensitive language, but you can include
most HTML or javascript coding on the page. Here are some things
to watch for:

1. You cannot include javascript that has to access another file 
   to run. DO NOT include the <script> and </script> tags in the 
   .js file. They are included in the location script code. 

2. If your content contains a backslash "\" it must be preceded 
   by another backslash "\\". 

3. If your content contains an apostrophe (') it must be 
   preceded by a backslash (\'). 

4. The most common reasons for script error messages are extra 
   space at the end of a line, or missing characters.

This is the same type of script used to syndicate content for
use on other sites. But to code a long article or web design tip
by hand would take some time. I used a CGI script called "Master
Syndicator" that codes the content for me. The script is 
available at:

http://www.mompswebdesign.com/cgi-bin/prolinkz/pl.cgi?willmaster

Note: whether using CSS, SSI, or Javascript Include pages be
sure to upload them to your site in ASCII mode.

Implementing one or all three of these "Page Include" methods
will make maintaining and adding to your site a lot quicker and
easier.


================================================================
Larry (Momp) owns Momp's Web Design and MWD News newsletter. In
addition to the web design service, the site includes a web
design reference library for webmasters.

Momp's Web Design: http://www.mompswebdesign.com/ 
MWD Newsletter: http://www.mompswebdesign.com/mwdnews.html 
Contact Momp: mailto:momp@mompswebdesign.com
================================================================